<template>
    <a-spin :spinning="spinning">
        <a-form ref='formRef' :label-col='{span : 3}' :model='formData'>
            <!-- <a-form-item label='logo' name='logo'>
                <a-upload list-type='picture-card' :max-count="1" v-model:file-list='coverList' :beforeUpload='beforeUpload' :customRequest='uploadCover' accept="image/png,image/jpeg,image/gif,image/webp">
                    <template v-if='coverList.length == 0'>
                        <PlusOutlined />
                    </template>
                </a-upload>
            </a-form-item> -->
            <a-form-item label='名称' name='name'>
                <a-input style="width: 500px;" type='text' v-model:value='formData.name' show-count :maxlength="20"  />
            </a-form-item>
            <a-form-item label='地址' name='address'>
                <a-input style="width: 500px;" type='text' v-model:value='formData.address' show-count :maxlength="100"  />
            </a-form-item>
            <a-form-item label='邮政编码' name='postalCode'>
                <a-input style="width: 500px;" type='text' v-model:value='formData.postalCode' show-count :maxlength="10"  />
            </a-form-item>
            <a-form-item label='联系电话' name='tel'>
                <a-input style="width: 500px;" type='text' v-model:value='formData.tel' show-count :maxlength="20"  />
            </a-form-item>
            <a-form-item label='邮箱' name='email'>
                <a-input style="width: 500px;" type='text' v-model:value='formData.email' show-count :maxlength="50"  />
            </a-form-item>
            <a-form-item label='视频' name='video'>
                <div :class="$style.uploadvideo">
                    <a-upload list-type="picture" :max-count="1" v-model:file-list='videoList' :beforeUpload='beforeUpload' :customRequest='uploadVideo' accept=".mp4,.3gp,.rmvb,.wmv,.flv,.avi">
                        <a-button>
                            <upload-outlined></upload-outlined>上传视频
                        </a-button>
                    </a-upload>
                </div>
            </a-form-item>
            <a-form-item v-if="!spinning" label='沙区介绍' name='content'>
                <!-- <a-textarea style="width: 500px;" v-model:value="formData.content" :rows="4" /> -->
                <RichEditor style="width: 800px;" v-model:excerpt="formData.excerpt" :excerpt-length="200" v-model="formData.content" :upload-api="uploadApi" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 3 }">
                <a-button type="primary" :loading="loading" @click="submit">保存</a-button>
            </a-form-item>
        </a-form>
    </a-spin>
</template>

<script lang="ts" setup>
    import { infoApi, saveApi } from '@/api/Shaqu';
    import { UploadOutlined } from '@ant-design/icons-vue';
    import RichEditor from '@/components/RichEditor.vue'
        import { PlusOutlined } from '@ant-design/icons-vue';
        import { ref } from 'vue';
    import { message, Modal } from "ant-design-vue";
    import { uploadApi } from "@/api/Upload";


    const staticURL = import.meta.env.B_NET_STATIC_URL

    const spinning = ref(true)
    const loading = ref(false)

    const coverList = ref<any[]>([])
    const videoList = ref<any[]>([])
    const formRef = ref()

    
    const formData = ref<any>({
        name:'',
        content: '',
        video: '',
        address: '',
        tel: '',
        email: '',
        postalCode: ''
    })


    infoApi().then(r => {
        if(r.data) {
            for(let k in r.data) {
                if(k in formData.value) {
                    formData.value[k] = r.data[k]
                }
            }

            if(r.data.logo) {
                coverList.value[0] = {
                    status : 'done',
                    url : import.meta.env.B_NET_STATIC_URL + r.data.logo
                }
            }

            if(r.data.video) {
                videoList.value[0] = {
                    status : 'done',
                    name: r.data.video,
                    url : import.meta.env.B_NET_STATIC_URL + r.data.video
                }
            }
        }

        spinning.value = false
    })

    


    async function submit() {
        loading.value = true
        let params  = await formRef.value.validate()
        params.excerpt = formData.value.excerpt

        if(params.video == null) {
            params.video =''
        }
        
        const r = await saveApi(params)

        loading.value = false

        if(r.success) {
            message.success('保存成功')
        }else {
            Modal.error('保存失败')
        }
    }


    function uploadCover(e) {
        if(e.file.size > 1024 * 1024 * 5) {
            Modal.error({
                title : '图片不能大于5M'
            })
            return
        }



        uploadApi(e.file).then(res => {
            coverList.value[0].status = 'done'
            coverList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
            formData.value.logo = res.data

            formRef.value.validateFields(['logo'])
        })
    }

    function uploadVideo(e) {
        uploadApi(e.file).then(res => {
            videoList.value[0].status = 'done'
            videoList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
            formData.value.video = res.data
        })
    }

    function beforeUpload(file:File, field:FormField) {
        return true
    }

    defineExpose({
        submit
    })
</script>

<style lang="scss" module>
    .uploadvideo{
        display:flex;
    }

    .videobox{
        width: 100px;
        height: 100px;

        video{
            width: 100%;
            height: 100%;
        }
    }
</style>